<!doctype html>
<html lang="en">
  <head>
    <!-- lang="en" 用于进网页之后的解析中英文 -->
    <meta charset="utf-8">
    <!-- 提示浏览器使用最新硬核-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--移动端优先的适配 配置-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS 引入 -->
		<link rel="stylesheet" href="bootstrap.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript 引入 -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap.js"></script> 
    <!--
        Bootstrap 自带的很多逻辑 + 样式 都为如a的下划线等常用标签做了最好的配置
    -->
	  		<!--布局容器 container 纯为固定容器 container-fluid为响应式(根据不同大小的界面展示不同大小的宽度高度)容器布局-->
			  <div class="container" style="background: red ; font-size:large ; color: blue;">
			 		我是Container框架
			 		<h1>Hello, world!</h1>
			 		<p>我是一个段落</p>
			 		<a href="#">我是超链接</a>
			 	</div>
			 	<div class="container-fluid" style="background: green ; font-size:large ; color: blue;">
			 		我是Container-fluid框架
			 		<h1>Hello, world!</h1>
			 		<p>我是一个段落</p>
			 		<a href="#">我是超链接</a>
			 	</div>
			  <!--栅格参数 有以下分类标准  
			  	 1. 超小屏幕  .col-xs- 类
			  	 2. 小屏幕      .col-sm- 类
			  	 3. 中等屏幕  .col-md- 类
			  	 4. 大屏幕      .col-lg- 类
			  	 最大12列，每列之间均有15px差距，可划分不同区域凑成12列,自适应于每种桌面形式
			  	 - 后跟数字代表占几位位置
			   有-->
			  <!--设置中等屏幕-->
			  <div class="row">
			  	<div class="col-md-1" style="background: red;">.col-md-1</div>
			  	<div class="col-md-1" style="background: red;">.col-md-1</div>
			  	<div class="col-md-1" style="background: red;">.col-md-1</div>
			  	<div class="col-md-1">.col-md-1</div>
			  	<div class="col-md-1">.col-md-1</div>
			  	<div class="col-md-1">.col-md-1</div>
			  	<div class="col-md-1">.col-md-1</div>
			  	<div class="col-md-1">.col-md-1</div>
			  	<div class="col-md-1">.col-md-1</div>
			  	<div class="col-md-1">.col-md-1</div>
			  	<div class="col-md-1">.col-md-1</div>
			  	<div class="col-md-1">.col-md-1</div>
			  </div>
			  <div class="row">
			  	<div class="col-md-8" style="background: blue;">.col-md-8</div>
			  	<div class="col-md-4" style="background: green;">.col-md-4</div>
			  </div>
			  <div class="row">
			  	<div class="col-md-4" style="background: yellow;">.col-md-4</div>
			  	<div class="col-md-4" style="background: black;">.col-md-4</div>
			  	<div class="col-md-4" style="background: pink;">.col-md-4</div>
			  </div>
			  <!--设置平板设备的栅栏空间 + 混合实现更强大动态的布局-->
			  <div class="row"><!--此处实现在不同样板页面下显示不同的栅栏所属列-->
			  		<div class="col-xs-12 col-sm-6 col-md-8" style="background: yellow">
			  				.col-xs-12 .col-sm-6 .col-md-8
			  		</div>
			  		<div class="col-xs-6 col-md-4" style="background: red">
			  				.col-xs-6 .col-md-4
			  		</div>
			  </div>
			  <!--自定义栅栏高时-->
			  <!--当出现多余列时情况 多出来属于一部分div里的，会随着一小部分一起被换行-->
				<div class="row" style="background: blue;">
				  <div class="col-xs-9" style="background: black;">.col-xs-9</div>
				  <div class="col-xs-4" style="background: red;">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
				  <div class="col-xs-6" style="background: green;">.col-xs-6<br>Subsequent columns continue along the new line.</div>
				</div>
				<br><br><br><br><br><br><br><br>
				<!--当出现列高不一致的情况时 用clearfix 实现栅栏的列高可以不一致需求-->
				<div class="row" style="background: black;">
				  <div class="col-xs-6 col-sm-3" style="background: white;">.col-xs-6 .col-sm-3 tttttttttttttttttttttttttttttttttttttttttttttttttttttt</div>
				  <div class="col-xs-6 col-sm-3"style="background: black;">.col-xs-6 .col-sm-3</div>
					<br><br><br>
				  <!-- Add the extra clearfix for only the required viewport -->
				  <div class="clearfix visible-xs-block">
				  	<div class="col-xs-6 col-sm-3" style="background: white;">.col-xs-6 .col-sm-3 tttttttttttttttttttttttttttttttttttttttttttttttttttt</div>
				 		<div class="col-xs-6 col-sm-3" style="background: red;">.col-xs-6 .col-sm-3</div>
				  </div>
				</div>
				<br><br><br>
				<!--还有列偏移、列嵌套等-->
				
  </body>
</html>


